<template>
  <div class="mt-3 btn-container">
    <div class="btn-group" role="group" aria-label="Basic example">
      <button
        type="button"
        class="btn"
        :class="active == 0 ? 'btn-primary' : 'btn-secondary'"
        @click="onBtnClick(0)"
      >
        全部
      </button>
      <button
        type="button"
        class="btn"
        :class="active == 1 ? 'btn-primary' : 'btn-secondary'"
        @click="onBtnClick(1)"
      >
        已经完成
      </button>
      <button
        type="button"
        class="btn"
        :class="active == 2 ? 'btn-primary' : 'btn-secondary'"
        @click="onBtnClick(2)"
      >
        未完成
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TodoButton',
  data() {
    return {
      active: 0,
    };
  },
  emits: ['button-change'],
  methods: {
    onBtnClick(value) {
      this.active = value;
      //把按钮的索引值传递出去
      this.$emit('button-change', value);
    },
  },
};
</script>
